/* eslint-disable no-sparse-arrays */
/*
 * @Author: wuhao930406 1148547900@qq.com
 * @Date: 2023-07-03 10:43:41
 * @LastEditors: wuhao930406 1148547900@qq.com
 * @LastEditTime: 2023-11-01 11:36:58
 * @FilePath: /utools_web/src/layouts/index.jsx
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
 */

import Limit from '@/components/Limit';
import { doFetch, getFetch } from '@/utils/doFetch';
import { history, Outlet, useLocation, useModel } from '@umijs/max';
import { useAsyncEffect, useRequest } from 'ahooks';
import { ConfigProvider, Modal, theme } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import { NProgress, setupNProgressPluginRuntime } from 'umi-plugin-nprogress-runtime';
import 'nprogress/nprogress.css';
import { useEffect, useMemo, useState } from 'react';
import useCurrentUser from '@/utils/useCurrentUser';

dayjs.locale('zh-cn');

export default function Layout() {
  const [mode, setmode] = useState('light');
  const { pathname } = useLocation();

  const { updateUser, currentUser } = useCurrentUser();

  useEffect(() => {
    setmode(currentUser?.theme);
  }, [currentUser?.theme]);

  const bg = useMemo(() => {
    if (currentUser?.theme === 'light') {
      if (!currentUser?.bgUrl) return {};
      return {
        backgroundImage: `url(${currentUser?.bgUrl})`,
        backgroundRepeat: 'no-repeat',
        backgroundSize: 'cover',
        backgroundPosition: 'center',
      };
    } else {
      if (!currentUser?.bgUrlDark) return {};
      return {
        backgroundImage: `url(${currentUser?.bgUrlDark})`,
        backgroundRepeat: 'no-repeat',
        backgroundSize: 'cover',
        backgroundPosition: 'center',
      };
    }
  }, [currentUser?.theme, currentUser?.bgUrl, currentUser?.bgUrlDark]);

  //公告逻辑
  const [modal, setModal] = useState({
    open: false,
    title: '公告',
    onCancel: () => {
      setModal((s) => ({
        ...s,
        open: false,
      }));
    },
  });

  useAsyncEffect(async () => {
    if (currentUser?.isBroadcastRead === 1 || pathname === '/user/login') {
      setModal((s) => ({
        ...s,
        open: false,
      }));
    } else {
      let res = await getFetch({ url: '/announcement/lastOne' });
      if (res?.data?.data?.announcement) {
        setModal((s) => ({
          ...s,
          open: true,
          content: res?.data?.data?.announcement,
        }));
      }
    }
  }, []);


  return (
    <ConfigProvider
      theme={{
        cssVar: true,
        hashed: false,
        algorithm: mode === 'light' ? theme.algorithm : theme.darkAlgorithm,
        token: {
          colorPrimary: mode === 'light' ? '#1B6FFE' : '#a1f6fb',
          colorSecondary: mode === 'light' ? '#1B6FFE99' : '#a1f6fb9f',
          colorBorder: mode === 'light' ? '#f0f0f0' : '#333',
          colorBgSecondary: mode === 'light' ? 'rgba(255,255,255,0.8)' : 'rgba(255,255,255,0.04)',
          colorBgLighter: mode === 'light' ? 'rgba(255,255,255,0.4)' : 'rgba(255,255,255,0.2)',
          colorBgCard: mode === 'light' ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.3)',
          colorBgreSecondary: mode !== 'light' ? 'rgba(255,255,255,0.8)' : 'rgba(0,0,0,0.4)',
          colorBgThird: mode === 'light' ? '#ddd' : 'rgba(0,0,0,0.4)',
          colorBgFourth: mode === 'light' ? '#f9f9f9' : '#333333',
          colorBgSixth: mode === 'light' ? '#f9f9f9' : '#222222',
          colorBgFifth: mode === 'light' ? '#333333' : '#999999',
          colorBgSeven: mode === 'light' ? '#f0f0f0' : '#202020',
          subMenuItemBg: mode === 'light' ? 'rgba(255,255,255,1)' : 'rgba(0,0,0,1)',
          colorOppsite: mode === 'light' ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.8)',
          colorOppsites: mode === 'light' ? 'rgba(0,0,0,0.05)' : 'rgba(255,255,255,0.05)',
          colorError:
            currentUser?.waringType === true ? 'rgba(236, 119, 135,0.5)' : 'rgb(236, 119, 135,0.5)',
          colorWarning:
            currentUser?.waringType === true ? 'rgba(242, 154, 90,0.5)' : 'rgba(242, 154, 90,0.5)',
          colorSuccess: '#27C160',
          colorleftNav: mode === 'light' ? '#1A6FFE' : 'rgba(0,0,0,0.55)',
          colorleftNavBar: mode === 'light' ? 'rgba(0, 0, 0, 0.06)' : 'rgba(0,0,0,0.1)',
          
        },
        components: {
          Segmented: {
            itemSelectedColor: mode === 'light' ? '#1B6FFE' : '#a1f6fb',
          },
          Progress: {
            circleTextFontSize: 12,
          },
          Menu: {
            collapsedWidth: 60,
            itemBg: 'transparent',
            itemSelectedBg: 'rgba(255,255,255,0.9)',
            itemActiveBg: 'transparent',
            itemHoverBg: 'transparent',
            itemHoverColor: '#ffffff',
            itemColor:"rgba(255,255,255,0.7)",
            activeBarBorderWidth: 0
          }
        },
      }}
      locale={zhCN}
      key={currentUser.orgId ?? "orgId"}
    >
      {/* <Modal
        {...modal}
        cancelButtonProps={{
          style: {
            display: 'none',
          },
        }}
        okText="知道了"
        onOk={async () => {
          await updateUser({
            isBroadcastRead: 1,
          });
          setModal((s) => ({
            ...s,
            open: false,
          }));
        }}
      >
        <Limit content={modal?.content}></Limit>
      </Modal> */}
      <div
        id='container'
        className={
          mode === 'light' && !bg.backgroundImage
            ? 'bglight'
            : mode === 'dark' && !bg.backgroundImage
              ? 'bgdark'
              : ''
        }
        style={{
          '--bgcolor': mode === 'light' ? 'rgba(255,255,255,0.8)' : 'rgba(255,255,255,0.04)',
          height: '100%',
          overflow: 'hidden',
          position: 'relative',
          ...bg,
        }}
      >
        <div
          style={{
            transform: 'translateY(0)',
            transition: 'transform 0.4s',
            height: '100%',
          }}
        >
          <Outlet context={{ mode }} />
        </div>
      </div>
    </ConfigProvider>
  );
}
